<template>
  <div class="habitableroomDetail">
    <div class="top">
      <div class="border"></div>
      <h3 v-if="type == 'add'">{{ habitableroomDetail.add }}</h3>
      <h3 v-else>{{ habitableroomDetail.fix }}</h3>

       <el-button
          type="success"
          style="margin-left:200px"
          v-if="type != 'add' && isEditor"
          :size="size"
          @click="editor"
          >{{ habitableroomDetail.editor }}</el-button
        >
        <el-button type="warning" style="margin-left:200px" v-if=" type != 'add' && !isEditor" :size="size" @click="enter">
          {{habitableroomDetail.enter}}</el-button>

        <el-button type="info" style="margin-left:80px" v-if="type != 'add' && !isEditor" :size="size" @click="toCancel">{{
          habitableroomDetail.cancel
        }}</el-button>

    </div>
    <div class="main">
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-position="top"
        class="demo-ruleForm"
      >
        <el-form-item
          :label="habitableroomDetail.manNumber"
          prop="buildingName"
        >
          <el-select
            :disabled="isEditor"
            v-model="ruleForm.buildingName"
            @change="changeBuild"
          >
            <el-option
              v-for="item in buildList"
              :key="item.value"
              :label="item.buildingName"
              :value="item.buildingId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          :label="habitableroomDetail.roomNo"
          prop="roomNo"
          ref="room"
        >
          <el-input
            :disabled="isEditor"
            v-model.trim="ruleForm.roomNo"
          ></el-input>
        </el-form-item>
      </el-form>
      <!-- 摄像头 -->

      <div v-if="type !== 'add'">
        <!-- <h3 style="margin-top:30px;margin-bottom:30px">
          {{ habitableroomDetail.warning }}
        </h3>
        <el-row style="width:700px;">
        </el-row> -->
        <div class="Ckplayer" style="margin-top:30px">
          <el-row>
            <el-col :span="19" :class="filterBlur">
              <img style="width:700px;height:500px" :src="Camerasrc" />
            </el-col>
            <el-col :span="5">
              <div style="width:100%;height:500px;position:relative;" v-if="false">
                <el-button class="luxiang" :size="size" @click="download">{{
                  habitableroomDetail.download
                }}</el-button>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="bottom">
        

        
        <el-button type="info"  style="margin-left:20px" v-if="type == 'add'" :size="size" @click="toRoomManagement">{{
          habitableroomDetail.cancel
        }}</el-button>

        <el-button
          type="success"
          v-if="type == 'add' && isEditor"
          :size="size"
          @click="editor"
          >{{ habitableroomDetail.editor }}</el-button
        >
        <el-button type="warning"  v-if=" type == 'add' && !isEditor" :size="size" @click="enter">
          {{habitableroomDetail.enter}}</el-button>


        <el-button
            :size="size"
            v-if="type !== 'add'"
            style="margin-left:20px"
            :loading="photographLoading"
            @click="Photograph"
            >{{ habitableroomDetail.Photograph }}</el-button>
       
        <el-button
          class="editBtn boxShadowButton"
          @click="handleArea();"
          v-if="type !== 'add'"
          :size="size"
          :disabled="!this.deviceNo"
          >{{ habitableroomDetail.areaSet }}</el-button
        >
        <el-button
          type="primary"
          v-if="type !== 'add'"
          :size="size"
          @click="toSensorSettings"
          >{{ habitableroomDetail.SensorSettings }}</el-button
        >
      </div>

      <!-- 绑定 -->
      <el-dialog
        :title="habitableroomDetail.binding"
        :visible.sync="bangdingDialogVisible"
        width="30%"
        :center="true"
      >
        <h3 style="text-align: center">{{ habitableroomDetail.isBangding }}</h3>
        <span slot="footer" class="dialog-footer">
          <el-button
            class="deleteBtn boxShadowButton"
            @click="bangdingCheck"
            :size="sizemin"
            >{{ habitableroomDetail.check }}</el-button
          >
          <el-button
            class="boxShadowButton"
            :size="sizemin"
            @click="bangdingDialogVisible = false;"
            >{{ habitableroomDetail.cancel }}</el-button
          >
        </span>
      </el-dialog>

      <!-- 录像下载 -->
      <el-dialog
        :title="habitableroomDetail.download1"
        :visible.sync="downloadDialogVisible"
        width="40%"
        :center="true"
      >
        <el-row>
          <el-col :span="8">
            <el-button size="mini" type="primary" @click="handlehours">{{
              habitableroomDetail.hoursluxiang
            }}</el-button>
          </el-col>
          <el-col :span="8">
            <el-button size="mini" type="danger" @click="handlearound" >{{
              habitableroomDetail.aroundluxiang
            }}</el-button>
          </el-col>
          <el-col :span="8">
            <el-button size="mini" @click="downloadDialogVisible = false;">{{
              habitableroomDetail.cancel
            }}</el-button>
          </el-col>
        </el-row>
        <!--
          <div v-if="hoursluxiangDialogVisible">
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="date" label="日期" width="180"></el-table-column>
              <el-table-column prop="name" label="姓名" width="180"></el-table-column>
              <el-table-column prop="address" label="地址"></el-table-column>
              <el-table-column label="操作"></el-table-column>
            </el-table>
          </div>
          <div v-if="aroundluxiangDialogVisible">
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="date" label="日期" width="180"></el-table-column>
              <el-table-column prop="name" label="名字" width="180"></el-table-column>
              <el-table-column prop="address" label="地址"></el-table-column>
            </el-table>
          </div>
        -->
      </el-dialog>

      <!-- 报警区域弹出层 -->
      <el-dialog
        :visible.sync="showAreaDialogFlag"
        :close-on-click-modal="false"
        width="800px"
        center
        class="wrapper"
      >
        <div slot="title">{{ habitableroomDetail.areaSet }}</div>
        <div style="margin-left:5px">
          <img
            src="../../../assets/wuchangimg/juxing.png"
            style="vertical-align:middle;font-size:16px"
          />
          <span style="vertical-align:middle;font-size:18px;" class="black">{{
            habitableroomDetail.cameraAreaAdd
          }}</span>
        </div>
        <div class="example-2 auto-width">
          <div class="left">
            <el-col class="mag">
                <!-- :disabled="quyulist.length > 4" -->
              <el-button
                type="primary"
                @click="addArea"
                size="small"
                >{{ habitableroomDetail.areaAdd }}</el-button
              >
              <!--
                <el-button type="primary" :disabled="areaFlag==1" @click="deleteArea" size="small">
                区域删除
                </el-button>
              -->
              <!--
                by guo 2020-3-31-09:03 修改  去除下拉框的 v-if="showAreaName==false"
              -->
              <el-select
                v-model="quyuvalue"
                @change="changeArea"
                :placeholder="habitableroomDetail.changeArea"
                class="select"
                style="width:120px;margin-left:8px"
                size="small"
              >
                <el-option
                  v-for="item in quyulist"
                  :key="item.id"
                  :label="item.planName"
                  :value="item.id"
                ></el-option>
              </el-select>
              <!-- by guo 2020-3-31-09-修改 注释 -->
              <!--
                <el-input v-model="addAreaName" v-if="showAreaName==true" readonly style="width:120px;margin-left:8px" size="small"></el-input>
              -->
            </el-col>
            <canvas
              class="canvas"
              id="canvas"
              width="320"
              height="320"
              @mousedown="canvasDown($event);"
              ref="canvas"
              >{{ habitableroomDetail.cameraCanvasMsg }}</canvas
            >
            <!-- by guo 2020-3-17-13:57添加 img -->
            <img class="canvas-img" ref="conf0" :src="picture" />
            <div class="mag">
              <el-button
                type="primary"
                v-if="isShowEdit"
                @click="clear"
                size="small"
                >{{ habitableroomDetail.resetMade }}</el-button
              >
              <el-button
                type="primary"
                v-if="isShowEdit"
                @click="deleteOne"
                size="small"
                >{{ habitableroomDetail.cancelMade }}</el-button
              >
              <el-button type="primary" @click="enterAdd" size="small">{{
                habitableroomDetail.enter2
              }}</el-button>
            </div>
          </div>
          <div class="right">
            <div class="scorll">
              <div class="pp">{{ habitableroomDetail.madeTuXing }}</div>
              <p class="pp" v-for="(item, index) in points" :key="index">
                {{ index + 1 }}. ({{ item.x }},{{ item.y }})
              </p>
            </div>
            <div style="margin-top:10px;float:right;margin-right:8px">
              <el-button type="primary" @click="enterSelect" size="small">{{
                habitableroomDetail.enter2
              }}</el-button>
              <el-button type="info" @click="handleCancel" size="small">{{
                habitableroomDetail.cancel
              }}</el-button>
            </div>
          </div>
        </div>
        
        <el-dialog
          width="30%"
          :title="
            areaFlag == 1
              ? habitableroomDetail.addArea
              : habitableroomDetail.editArea
          "
          :visible.sync="innerVisible"
          center
          append-to-body
        >
          <div style="display:flex">
            <label style="margin-top: 10px;width: 85px;">{{
              habitableroomDetail.areaName
            }}</label>
            <el-input
              style="width:260px;"
              maxlength="8"
              v-model.trim="addAreaName"
            ></el-input>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="interenter" size="small">{{
              habitableroomDetail.enter2
            }}</el-button>
            <el-button type="info" @click="interCancel" size="small">{{
              habitableroomDetail.cancel
            }}</el-button>
          </span>
        </el-dialog>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import bus from "../../../vuex/eventBus"; //引入eventBus,接收子界面传递的跳转指令,然后在父界面跳转,添加tab
import Camerasrc from "@/assets/lifeGroupimg/noCamera.png";
export default {
  data() {
    return {
      cameraManagement: this.$t("m.cameraManagement"),
      habitableroomDetail: this.$t("m.habitableroomDetail"), //引入 lang 里面的字符串资源,
      size: "medium ",
      sizemin: "mini",
      bangdingDialogVisible: false,
      type: "", //是添加还是修改
      isEditor: true, //是编辑还是查看
      ruleForm: {
        buildingName: "",
        floorNo: 1,
        roomNo: ""
      },
      buildList: [],
      buildingId: 0,
      filterBlur: "filter-blur0",
      buildingName: "",
      floorList: [],
      floorNo: 0,
      deviceNo: "", //摄像头No
      deviceId: "", //摄像头Id
      Camerasrc: Camerasrc, //摄像头拍照
      photographLoading: false, //拍照按钮的loading
      acceptLanguage: "ja_JP", //数据请求传参需要传的语言  ja_JP----日文
      points: [],
      innerVisible: false,
      showAreaDialogFlag: false,
      areacurrentDeviceId: "", //当前设置不报警区域的摄像头Id
      areaIndex: 0, //选中的index；
      areaFlag: 0, //新增的时候置为1，修改的时候置为2，默认为0，但是没有区域的时候置为1；
      canvas: "",
      quyuvalue: "",
      isShowEdit: false,
      addAreaName: "",
      quyulist: [],
      ctx: {},
      picture: "", //获取摄像头拍摄的图片
      downloadDialogVisible: false,
      hoursluxiangDialogVisible: true,
      aroundluxiangDialogVisible: false,
      tableData: []
    };
  },
  methods: {
    //48小时内录像
    handlehours() {
      this.hoursluxiangDialogVisible = true;
      this.aroundluxiangDialogVisible = false;
    },

    //晕倒前后录像
    handlearound() {
      this.hoursluxiangDialogVisible = false;
      this.aroundluxiangDialogVisible = true;
    },

    toCancel(){
      this.isEditor = true;
      this.type = sessionStorage.getItem("HabitableType");
      if (this.type !== "add") {
        this.getRoomDetail();
        this.initAlpha();
      }
    },
    //返回
    toRoomManagement() {
      bus.$emit("homePage", {
        type: "remove",
        path: "/habitableroomDetail",
        showpath: "/HabitableRoomManagement"
      });
    },

    //传感器设置
    toSensorSettings() {
      bus.$emit("homePage", {
        type: "jump",
        path: "/SensorSettings",
        title: this.habitableroomDetail.SensorSettings2,
        params: { roomNo: this.ruleForm.roomNo }
      });
    },

    //数据回显
    getRoomDetail() {
      this.$get(
        "omc/Room/lifeRoom",
        { roomId: sessionStorage.getItem("roomId") },
        this.acceptLanguage
      ).then(res => {
        this.ruleForm = res;
        this.buildingId = res.buildingId;
        this.queryFloor(res.buildingId);
        //查询绑定的摄像头
        if (res.cameraNo.length > 0) {
          this.deviceNo = res.cameraNo[0];
          this.getPicture();
          this.queryDeviceId(this.deviceNo);
        } else {
          this.deviceNo = "";
        }
        if (this.deviceNo == "") {
          this.$message({
            message: this.habitableroomDetail.camaraTip,
            type: "error"
          });
        }
      });
    },

    //通过设备编号拿设备id
    queryDeviceId(deviceNo) {
      let params = new Object();
      params.deviceNo = "";
      params.pageNum = 1;
      params.pageSize = 9999;
      this.$postJson(
        "dmc/camera/queryListWithPage",
        params,
        this.acceptLanguage
      ).then(res => {
        if (res.code == 200) {
          if (res.result.list != null) {
            console.log(
              res.result.list,
              "res.result.listres.result.listres.result.list"
            );
            res.result.list.forEach(item => {
              if (item.deviceNo == deviceNo) {
                this.deviceId = item.id;
              }
            });
            console.log(this.deviceId, "this.deviceId");
          } else {
            this.$message({
              message: this.habitableroomDetail.deviceEmpty,
              type: "error"
            });
          }
        } else {
          this.$message({
            message: res.message,
            type: "error"
          });
        }
      });
    },

    //查询绑定的摄像头的图片
    getPicture() {
      this.$postForm(
        "dmc/camera/getPicture",
        { deviceNo: this.deviceNo },
        this.acceptLanguage
      ).then(res => {
        if (res.code == 200) {
          if (res.result.pictureUrl != "") {
            let suijiNum = Math.floor(Math.random() * 10 + 1);
            this.Camerasrc = res.result.pictureUrl + "&" + suijiNum;
          } else {
            this.Camerasrc = Camerasrc;
          }
        } else {
          this.Camerasrc = Camerasrc;
        }
      });
    },

    //拍照
    Photograph() {
      if (this.deviceNo == "") {
        this.bangdingDialogVisible = true;
      } else {
        this.photographLoading = true;
        this.$postForm(
          "dmc/camera/takePicture",
          { deviceNo: this.deviceNo },
          this.acceptLanguage
        ).then(res => {
            setTimeout(() => {
              this.photographLoading = false;
            }, 200);
            if (res.code == 200) {
              this.$message({
                message: this.habitableroomDetail.photoSuccess,
                type: "success"
              });
              if (res.result.picture == "") {
                //如果为空就继续用上一张图
                this.Camerasrc = this.Camerasrc;
              } else {
                this.getPicture();
              }
            } else {
              this.$message({ message: res.message, type: "error" });
            }
          })
          .catch(error => {
            if (
              error.code == "ECONNABORTED" &&
              error.message.indexOf("timeout") != -1
            ) {
              this.$message({
                message: this.habitableroomDetail.photoError,
                type: "error"
              });
            }
            setTimeout(() => {
              this.photographLoading = false;
            }, 200);
          });
      }
    },

    //编辑按钮
    editor() {
      this.isEditor = false;
    },

    //下载录像按钮
    download() {
      this.downloadDialogVisible = true;
    },

    //绑定摄像头按钮
    bangding() {},

    //确认绑定
    bangdingCheck() {
      bus.$emit("homePage", {
        type: "jump",
        path: "/CameraManagement",
        title: this.habitableroomDetail.camera
      });
    },

    //确认按钮
    enter() {
      //判断是添加还是修改
      if (this.type == "add") {
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            let param = {
              roomNo: this.ruleForm.roomNo,
              buildingId: this.buildingId,
              // floorNo: this.floorNo
              // life只有一层
              floorNo: this.ruleForm.floorNo
            };
            this.$postJson(
              "omc/Room/lifeRoom",
              param,
              this.acceptLanguage
            ).then(res => {
              if (res.code == 200) {
                bus.$emit("homePage", {
                  type: "remove",
                  path: "/habitableroomDetail",
                  showpath: "/HabitableRoomManagement"
                });
                this.$bus.$emit("changeHabitableroom");
              } else {
                this.$message({ message: res.message, type: "error" });
              }
            });
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      } else if (this.type == "fix") {
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            let param = {
              roomNo: this.ruleForm.roomNo,
              buildingId: this.buildingId,
              floorNo: this.ruleForm.floorNo,
              id: sessionStorage.getItem("roomId")
            };
            this.$put(
              "omc/Room/lifeRoom",
              param,
              "FORM-DATA",
              this.acceptLanguage
            ).then(res => {
              if (res.code == 200) {
                bus.$emit("homePage", {
                  type: "remove",
                  path: "/habitableroomDetail",
                  showpath: "/HabitableRoomManagement"
                });
                this.$bus.$emit("changeHabitableroom");
              } else {
                this.$message({ message: res.message, type: "error" });
              }
            });
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      }
    },

    //获取楼栋列表
    getBuildList() {
      this.$postForm("omc/Building/showAll", {}, this.acceptLanguage).then(
        res => {
          this.buildList = res.result;
        }
      );
    },

    //选择楼栋
    changeBuild(val) {
      console.log(val, "23233");
      // this.$refs["floor"].resetField(); //更换了楼栋之后将楼层的数据清空  by guo 2020-3-28-17:07添加
      //this.$refs["room"].resetField(); //更换了楼栋之后将房间的数据清空

      this.floorList = []; //清空
      this.buildingId = val;
      let buildList = this.buildList.filter(item => {
        return item.buildingId == val;
      });
      this.buildingName = buildList[0].buildingName;
      //根据楼栋查楼层
      this.queryFloor(val);
    },
    //设置模糊度
    initAlpha() {
      var alphaValue = 0;
      this.$postJson('omc/lifeAmbiguity/select',{},
         this.acceptLanguage).then(res =>{
            if(res.code == 200 && res.result.length!=0){
              if (Number(res.result[0].ambiguity) == null) {
                alphaValue = 0;
              } else {
                alphaValue = Number(res.result[0].ambiguity);
              }
              this.filterBlur='filter-blur'+alphaValue;
           }
      });
    },
    //根据楼栋查楼层
    queryFloor(buildingId) {
      this.$postForm(
        "omc/Building/selectById",
        { buildingId: buildingId },
        this.acceptLanguage
      ).then(res => {
        for (var i = 0; i < res.result.floorNum; i++) {
          this.floorList.push({ floorNo: i + 1 });
        }
      });
    },

    //选择楼层
    changeFloor(val) {
      this.floorNo = val;
    },

    /* 
      查询图片
    */
    queryPicture(deviceNo) {
      if (deviceNo != "") {
        let params = new Object();
        params.deviceNo = deviceNo;
        console.log(params);
        this.$postForm(
          "dmc/camera/getPicture",
          params,
          this.acceptLanguage
        ).then(res => {
          console.log(res, "查询拍摄的图片");
          if (res.code == 200) {
            if (res.result != null) {
              if (res.result.picture != "") {
                var backgroundImage = res.result.pictureUrl; //by guo 2020-2-29-11:51修改  后端修改了图片返回的格式
                this.picture = backgroundImage; //by guo 2020-2-29-11:51修改  后端修改了图片返回的格式
              } else {
                this.picture = "";
              }
            } else {
              this.picture = "";
            }
          }
        });
      }
    },

    /* 
      by guo 2020-3-23-9:50添加
      关闭区域设置的弹框
    */
    handleCancel() {
      this.showAreaDialogFlag = false;
      this.points = []; //清除右边的坐标
      this.drawPolygon(this.points); //清除左边的图形
      this.showAreaName = false; //select下拉框框显示
      this.editFlag = false; //by guo 2020-3-31-9:58添加
    },

    //摄像头不报警区域开始
    addArea() {
      this.isShowEdit = true;
      this.areaFlag = 1; //新增标志；
      this.points = [];
      this.addAreaName = "";
      this.drawPolygon(this.points);
    },
    //选中某个区域,外层的enter按钮；
    enterSelect() {
      if (this.areaFlag != 0 && this.quyulist.length != 0) {
        this.$message({
          message: this.cameraManagement.areaSave,
          type: "error"
        });
        return;
      }
      if (this.quyulist.length == 0) {
        this.showAreaDialogFlag = false;
        return;
      }
      console.log(this.areaIndex);
      console.log(this.quyulist);
      if (this.areaIndex == -1) {
        this.showAreaDialogFlag = false;
        return;
      }
      if (this.areaIndex > this.quyulist.length - 1) {
        this.showAreaDialogFlag = false;
        return;
      }
      console.log(this.areaIndex, "this.areaIndex-------------");
      //by guo 2020-3-20-13:19修改  后端参数变更
      //by guo 2020-3-30-16:49修改 判断是新增（提交planId）   还是修改的(提交this.quyulist[this.areaIndex].id)
      let planId = "";
      if (
        this.planId != "" &&
        this.planId != null &&
        this.planId != undefined
      ) {
        planId = this.planId;
      } else {
        planId = this.quyulist[this.areaIndex].id;
      }
      // let planId=this.quyulist[this.areaIndex].id;
      this.$postJson(
        "dmc/camera/useUnalertAeraPlan/" + planId,
        {},
        this.acceptLanguage
      ).then(res => {
        if (res.code == 200) {
          this.planId = ""; //by guo 2020-3-30-16:52添加  清空新增提交的palanId
          this.$message({ message: res.message, type: "success" });
          this.showAreaDialogFlag = false;
          this.showAreaName = false; //select下拉框框显示
          this.editFlag = false; //by guo 2020-3-31-9:58添加
        } else {
          this.$message({ message: "" + res.message, type: "error" });
        }
      });
    },

    //获取
    handleArea() {
      // this.getPicture(row.deviceNo);//获取图片  by guo 2020-3-17-13:25添加
      this.queryPicture(this.deviceNo);
      this.showAreaDialogFlag = true;
      // console.log(row);
      // this.areacurrentDeviceId = row.id;
      this.areacurrentDeviceId = this.deviceId;
      console.log(
        this.areacurrentDeviceId,
        "this.areacurrentDeviceIdthis.areacurrentDeviceIdthis.areacurrentDeviceIdthis.areacurrentDeviceId"
      );
      var params = {};
      this.$postJson(
        "dmc/camera/listUnalertAeraPlan/" + this.areacurrentDeviceId,
        params,
        this.acceptLanguage
      ).then(res => {
        console.log(res);
        var list = [];
        var result = "";
        //没有的时候默认新增；
        if (res.result.length == 0) {
          this.areaFlag = 1;
          this.areaIndex = 0;
          this.points = [];
          this.addAreaName = "";
          this.isShowEdit = true;
        } else {
          this.areaFlag = 0; //不可编辑；
          this.isShowEdit = true;
        }
        for (var i = 0; i < res.result.length; i++) {
          if (res.result[i].status != 0) {
            result = res.result[i].id; //当前选择的数据
            this.points = res.result[i].list;
            // this.areaIndex = i+1;
            this.areaIndex = i; //by guo 2020-3-20-14:09修改
            this.addAreaName = res.result[i].planName;
          }
          list.push(res.result[i]);
        }
        this.quyulist = list;
        this.quyuvalue = result;
        this.drawPolygon(this.points);
      });
      this.show();
      console.log(this.areaIndex, "this.areaIndex0000");
    },
    changeArea(value) {
      console.log(value);
      for (var i = 0; i < this.quyulist.length; i++) {
        if (this.quyulist[i].id == value) {
          var points = [];
          for (var j = 0; j < this.quyulist[i].list.length; j++) {
            points.push(this.quyulist[i].list[j]);
          }
          this.points = points;
          this.areaIndex = i;
          this.areaFlag = 0;
          var araname = this.quyulist[i].planName;
          this.addAreaName = araname;
          this.drawPolygon(this.points);
          break;
        }
      }
      console.log(this.areaIndex, "this.areaIndex1111");
    },

    /* 
      取消方案添加或者修改   
    */
    interCancel() {
      this.innerVisible = false;
      this.showAreaName = false; //select下拉框框显示
    },

    interenter() {
      this.showAreaName = true; //input框显示
      console.log(this.areaFlag, this.quyulist, this.areaIndex);
      console.log(this.points);
      if (this.points.length < 3) {
        // 座標数が三個より少なければ区域が形成できません
        this.$message({ message: this.cameraManagement.area3, type: "error" });
        return;
      }
      if (this.addAreaName == "" || this.addAreaName.length < 1) {
        this.$message({
          message: this.cameraManagement.areaEnterName,
          type: "error"
        });
        return;
      }
      if (this.areaFlag == 1) {
        this.editFlag = false; //by guo 2020-3-31-9:58添加
        var params = {
          deviceId: this.areacurrentDeviceId,
          planName: this.addAreaName,
          list: this.points,
          width: 320,
          height: 320
        };
        this.$postJson(
          "dmc/camera/addUnalertAeraPlan",
          params,
          this.acceptLanguage
        ).then(res => {
          if (res.code == 200) {
            //新增成功；
            //重新获取数据
            this.$message({ message: res.message, type: "success" });
            this.areaFlag = 0;
            this.getAreaList();
            this.planId = res.result; //by  guo 2020-3-30-16:55添加  获取新增方案id
          } else {
            this.$message({ message: "" + res.message, type: "error" });
          }
        });
      } else if (this.areaFlag == 2) {
        //修改；
        this.planId = ""; //by  guo 2020-3-30-16:55添加  清空planId
        console.log(this.areaIndex);
        var params = {
          deviceId: this.areacurrentDeviceId,
          planName: this.addAreaName,
          id: this.quyulist[this.areaIndex].id,
          list: this.points,
          width: 320,
          height: 320
        };
        this.$postJson(
          "dmc/camera/updateUnalertAeraPlan",
          params,
          this.acceptLanguage
        ).then(res => {
          if (res.code == 200) {
            //重新获取数据
            this.$message({ message: res.message, type: "success" });
            this.areaFlag = 0;
            this.getAreaList();
            this.editFlag = true; //by guo 2020-3-31-9:58添加
          } else {
            this.$message({ message: "" + res.message, type: "error" });
          }
        });
      }
    },

    getAreaList() {
      var params = {};
      this.$postJson(
        "dmc/camera/listUnalertAeraPlan/" + this.areacurrentDeviceId,
        params,
        this.acceptLanguage
      ).then(res => {
        var list = [];
        for (var i = 0; i < res.result.length; i++) {
          list.push(res.result[i]);
          // if(res.result[i].status !=0){
          //     this.quyuvalue = res.result[i].id; //当前选择的数据
          // }
          //by guo 2020-3-31-09:54修改
          if (
            this.planId != "" &&
            this.planId != null &&
            this.planId != undefined
          ) {
            //新增时下拉框的回显
            this.quyuvalue = String(this.planId);
          } else {
            if (this.editFlag) {
              //修改时下拉框的回显
              this.quyuvalue = this.quyulist[this.areaIndex].id;
            } else {
              //打开报警区域时下拉框的回显 没有做新增和修改的操作
              if (res.result[i].status != 0) {
                this.quyuvalue = res.result[i].id; //当前选择的数据
              }
            }
          }
        }
        this.quyulist = list;
        this.innerVisible = false;
      });
    },

    clear() {
      this.points = [];
      //重新绘制就是修改；
      if (this.areaFlag == 0) {
        this.areaFlag = 2;
      }
      this.drawPolygon(this.points);
    },
    enterAdd() {
      if (this.areaFlag == 0) {
        this.$message({
          message: this.cameraManagement.areaResetMessage,
          type: "error"
        });
      } else {
        this.innerVisible = true;
      }
    },
    deleteOne() {
      var points = [];
      for (var i = 0; i < this.points.length - 1; i++) {
        points.push(this.points[i]);
      }
      this.points = points;
      if (this.areaFlag == 0) {
        this.areaFlag = 2;
      }
      this.drawPolygon(this.points);
    },
    show() {
      //防抖
      setTimeout(() => {
        console.log(this.$refs);
        this.canvas = this.$refs.canvas;
        console.log(this.canvas);
        this.ctx = this.canvas.getContext("2d"); //设置2D渲染区域
        this.ctx.lineWidth = 2; //设置线的宽度
      }, 0);
    },
    canvasDown(event) {
      console.log(event);
      console.log(this.points, this.points.length);
      if (event.button == 0 && this.areaFlag != 0) {
        // var x = event.pageX - this.canvas.getBoundingClientRect().x;
        // var y = event.pageY - this.canvas.getBoundingClientRect().y;
        var x = event.offsetX; //by guo 2020-3-30-19:18修改  上面的写法会有bug
        var y = event.offsetY; //by guo 2020-3-30-19:18修改  上面的写法会有bug
        // x = Number(x).toFixed(0);
        // y = Number(y).toFixed(0);
        x = Number(x).toFixed(0) < 0 ? 0 : Number(x).toFixed(0); //2020-3-23-9:56guo修改 修复横坐标为负数的bug
        y = Number(y).toFixed(0) < 0 ? 0 : Number(y).toFixed(0); //2020-3-23-9:56guo修改 修复纵坐标为负数的bug
        // if(this.points.length>50){
        if (this.points.length + 1 > 50) {
          //by guo 2020-3-23-10:44修改
          this.$message({
            message: this.cameraManagement.area50,
            type: "error"
          });
          return;
        }
        this.points.push({
          x: x,
          y: y
        });
        this.drawPolygon(this.points);
      }
    },
    drawPolygon(points) {
      this.ctx.clearRect(0, 0, 640, 640);
      this.ctx.strokeStyle = "#000";
      this.ctx.beginPath();
      if (points.length > 0) {
        this.ctx.fillStyle = "#FF0000";
        this.ctx.arc(points[0].x, points[0].y, 2, Math.PI * 2, 0, true);
        this.ctx.moveTo(points[0].x, points[0].y);
        for (var i = 1; i < points.length; i++) {
          this.ctx.fillStyle = "#FF0000";
          this.ctx.arc(points[i].x, points[i].y, 2, Math.PI * 2, 0, true);
          this.ctx.fillStyle = "rgb(255,0,255)";
          this.ctx.lineTo(points[i].x, points[i].y);
        }
        this.ctx.closePath();
        this.ctx.stroke();
        this.ctx.fill();
      }
    }
  },
  computed: {
    rules() {
      return {
        buildingName: [
          {
            required: true,
            message: this.$t("m.habitableroomDetail.null"),
            trigger: "change"
          }
        ],
        floorNo: [
          {
            required: true,
            message: this.$t("m.habitableroomDetail.null"),
            trigger: "change"
          }
        ],
        roomNo: [
          {
            required: true,
            message: this.$t("m.habitableroomDetail.null"),
            trigger: "blur"
          },
          {
            min: 0,
            max: 12,
            message: this.$t("m.habitableroomDetail.length"),
            trigger: "blur"
          }
        ]
      };
    }
  },
  created() {
    this.type = this.$route.query.type;
  },
  mounted() {
    console.log(this.$route, "dasdfasfasdfasdfasdfasdfasd");
    this.getBuildList();
    //  bus.$on('homePage',item =>{
    //    this.type = item.params.type
    //  })
    this.type = sessionStorage.getItem("HabitableType");
    if (this.type !== "add") {
      this.getRoomDetail();
      this.initAlpha();
    } else {
      this.isEditor = false;
    }
  }
};
</script>
<style lang="scss" scoped>
.filter-blur7 {
  filter: blur(7px) grayscale(100%) opacity(50%);
}
.filter-blur6 {
  filter: blur(6px) grayscale(100%);
}
.filter-blur5 {
  filter: blur(5px) grayscale(100%);
}
.filter-blur4 {
  filter: blur(4px) grayscale(100%);
}
.filter-blur3 {
  filter: blur(3px) grayscale(100%) contrast(150%);
}
.filter-blur2 {
  filter: blur(2px) grayscale(100%) contrast(150%);
}
.filter-blur1 {
  filter: blur(1px) grayscale(100%);
}
.filter-blur0 {
  filter: blur(0px);
}
.Ckplayer {
  height: 500px;
  margin: 0 auto;
  position: relative;
  /deep/ .el-button {
    width: 125px;
    height: 50px;
    background: #ff0000;
    color: #ffffff;
    white-space: normal;
    position: absolute;
    top: 230px;
    left: 0;
  }
}
#pixi {
  width: 100%;
  height: 500px;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
.demo-ruleForm{
  /deep/ .el-form-item__label {
    padding: 0 0 0px !important;
    line-height: 10px !important;
    color: #0000ff !important;
  }
  /deep/ .el-select{
    width: 280px;
  }
  /deep/ .el-input{
    width: 280px;
  }
  /deep/ .el-input__inner {
    width: 280px;
    border: none !important;
    border-bottom: 2px solid #cccccc !important;
    border-radius: 1px;
    background: #f6f6f6 !important;
  }
  /deep/.el-autocomplete .el-input__inner {
    width: 280px;
    border: none !important;
    border-bottom: 2px solid #cccccc !important;
    border-radius: 1px;
    background: #ffffff !important;
  }
}
.select{
  /deep/ .el-form-item__label {
    padding: 0 0 0px !important;
    line-height: 10px !important;
    color: #0000ff !important;
  }
  /deep/ .el-select{
    width: 150px;
  }
  /deep/ .el-input{
    width: 150px;
  }
  /deep/ .el-input__inner {
    width: 150px;
    border: none !important;
    border-bottom: 2px solid #cccccc !important;
    border-radius: 1px;
    background: #f6f6f6 !important;
  }
}

.habitableroomDetail {
  .top {
    display: flex;
    align-items: center;
    .border {
      width: 10px;
      height: 30px;
      background: black;
      margin-right: 10px;
    }
  }
  .main {
    margin-left: 20px;
    margin-top: 20px;
    p {
      color: #ff0000;
      margin-top: 10px;
    }
    .bottom {
      display: flex;
      justify-content: space-between;
      width: 700px;
      margin-bottom: 20px;
      margin-top: 5px;
    }
    .deleteBtn {
      background: #dddddd;
      color: #010101;
      border-radius: 5px;
    }
  }
}
.editBtn {
  background: #4a337f;
  cursor: default;
  color: #ffffff;
  border-radius: 5px;
}
canvas {
  //background-color: bisque;//by guo 2020-3-17-13:44修改
  position: relative;
  z-index: 99;
}
/* by guo 2020-3-17-13:56添加 */
.canvas-img {
  width: 320px;
  height: 320px;
  position: absolute;
  // top:148px;
  left: 25px;
  z-index: 1;
}
.black {
  color: black;
}
.mag {
  margin: 8px;
}
.example-2 {
  display: flex;
  width: 100%;
}
.example-2 .left {
  flex: 0 0 400px;
  height: 100%;
}
.example-2 .right {
  flex: 1;
  height: 100%;
}
.scorll {
  overflow-x: hidden;
  overflow-y: scroll;
  height: 370px;
}
.pp {
  margin: 3px;
}
.wrapper >>> .el-dialog--center .el-dialog__body {
  padding-top: 5px;
  padding-bottom: 8px;
}
</style>
